<template>
  <div class="business-functions">
    <h1>Business Functions</h1>
    <div class="functions">
      <div class="function">
        <h2>商品展示与交易</h2>
        <p>允许用户在网站上发布二手商品的信息，并与其他用户进行交易。这包括展示商品的图片、描述、价格以及交易条件等信息。</p>
      </div>

      <div class="function" style="background-color: #ffdbdc;">
        <h2>搜索与筛选</h2>
        <p>提供搜索功能，让用户能够方便地找到自己感兴趣的商品，并支持根据关键词、类别、价格范围等条件进行筛选。</p>
      </div>

      <div class="function" style="background-color: #fff9ff;">
        <h2>用户账户与管理</h2>
        <p>用户可以注册账户、登录、管理个人资料、查看交易历史等。同时，提供安全的支付方式，确保交易的安全性。</p>
      </div>

      <div class="function" style="background-color: #fff9fb;">
        <h2>消息通知</h2>
        <p>在交易过程中，提供消息通知功能，让买家和卖家能够及时沟通，了解交易进展和状态。</p>
      </div>

      <div class="function" style="background-color: #d4e0ff;">
        <h2>评价与信誉系统</h2>
        <p>让用户能够对交易双方进行评价，并建立信誉系统，提高交易的可信度，减少交易风险。</p>
      </div>

      <div class="function" style="background-color: brown;">
        <h2>客服支持</h2>
        <p>提供在线客服支持，解答用户的疑问和问题，提供交易过程中的帮助与指导。</p>
      </div>

      <div class="function" style="background-color: blanchedalmond;">
        <h2>推广与广告</h2>
        <p>通过各种方式进行网站推广，吸引更多的用户和商家加入平台，提高交易量和活跃度。包括在线广告、社交媒体推广、合作推广等。</p>
      </div>

      <div class="function" style="background-color: beige;">
        <h2>数据分析与反馈</h2>
        <p>通过数据分析工具，收集用户行为数据和交易数据，为用户和商家提供数据反馈和分析报告，帮助他们更好地了解市场趋势和用户需求，优化业务策略。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BusinessFunctions'
};
</script>

<style scoped>
.business-functions {
  padding: 20px;
}

.functions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

.function {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

.function h2 {
  margin-top: 0;
}

.function p {
  margin-bottom: 0;
}
</style>

.services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

/* You can add more styling as needed */
</style>